/**
 * 复选框与单选框
 * style.less
 * @author wangbo
 * @since 2019-02-20
 */
@import "../../css/animation";

.table-wrap {
    table[grid-manager] {
        th[gm-checkbox], td[gm-checkbox] {
            padding: 0;
            .th-wrap{
                padding: 0;
            }
            input[type=checkbox] {
                vertical-align: middle;
            }
        }
    }

    // 禁止选择
    .disabled-radio-checkbox{
        opacity: .7;
        pointer-events:none;
        .gm-radio-checkbox-inner{
            border-color: #ddd !important;
            background-color: #e8e8e8 !important;
        }
    }
    .gm-checkbox-wrapper {
        display: inline-block;
        color: rgba(0, 0, 0, .65);
        margin: 0;
        padding: 0;
        line-height: 12px;
        cursor: pointer;
        border-collapse: collapse;
        .gm-checkbox {
            display: inline-block;
            position: relative;
            top: -.5px;
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
            margin: 0;
            padding: 0;
            white-space: nowrap;
            outline: none;
            line-height: 1;
            vertical-align: middle;
            .gm-checkbox-input {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                z-index: 1;
                cursor: pointer;
                opacity: 0;
                margin: 0;
            }
            .gm-checkbox-inner {
                display: block;
                width: 14px;
                height: 14px;
                position: relative;
                top: 0;
                left: 0;
                border: 1px solid #d9d9d9;
                border-radius: 2px;
                background-color: #fff;
                transition: all .3s;
                &:after {
                    display: table;
                    width: 5px;
                    height: 8px;
                    position: absolute;
                    left: 3px;
                    top: 1px;
                    -webkit-transform: rotate(45deg) scale(0);
                    transform: rotate(45deg) scale(0);
                    border: 2px solid #fff;
                    border-top: 0;
                    border-left: 0;
                    content: " ";
                }
            }
            & + span {
                padding-left: 8px;
                padding-right: 8px;
                margin-top: -1px;
                font-weight: 400;
            }

            // 选中样式
            &.gm-checkbox-checked {
                &:after {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 2px;
                    border: 1px solid #1890ff;
                    content: "";
                    animation: gmCheckboxEffect .36s ease-in-out;
                    animation-fill-mode: both;
                    visibility: hidden;
                }
                .gm-checkbox-inner:after {
                    display: table;
                    position: absolute;
                    transform: rotate(45deg) scale(1);
                    border: 2px solid #fff;
                    border-top: 0;
                    border-left: 0;
                    content: " ";
                }
            }
            &.gm-checkbox-indeterminate {
                .gm-checkbox-inner:after {
                    width: 8px;
                    height: 1.2px;
                    position: absolute;
                    left: 2px;
                    top: 5px;
                    content: " ";
                    transform: scale(1);
                }
            }
            &.gm-checkbox-checked .gm-checkbox-inner,
            &.gm-checkbox-indeterminate .gm-checkbox-inner {
                background-color: #1890ff;
                border-color: #1890ff;
            }
            &:hover:after {
                visibility: visible;
            }
        }
        &:hover {
            .gm-checkbox:after {
                visibility: visible;
            }
        }
    }
    .gm-radio-wrapper {
        display: inline-block;
        position: relative;
        line-height: 12px;
        font-size: 12px;
        color: rgba(0, 0, 0, .65);
        padding: 0;
        cursor: pointer;
        .gm-radio {
            display: inline-block;
            position: relative;
            margin: 0;
            padding: 0;
            font-size: 12px;
            color: rgba(0, 0, 0, .65);
            white-space: nowrap;
            outline: none;
            line-height: 1;
            vertical-align: text-bottom;
            .gm-radio-input {
                position: absolute;
                left: 1px;
                top: 1px;
                z-index: 1;
                opacity: 0;
                margin: 0;
                cursor: pointer;
            }

            .gm-radio-inner {
                display: block;
                width: 14px;
                height: 14px;
                position: relative;
                top: 0;
                left: 0;
                border-radius: 100px;
                border: 1px solid #d9d9d9;
                background-color: #fff;
                transition: all .3s;
                &:after {
                    display: table;
                    width: 8px;
                    height: 8px;
                    position: absolute;
                    left: 2px;
                    top: 2px;
                    border-radius: 4px;
                    border-top: 0;
                    border-left: 0;
                    content: " ";
                    background-color: #1890ff;
                    opacity: 0;
                    transform: scale(0);
                }
            }
            &.gm-radio-checked {
                &:after {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 50%;
                    border: 1px solid #1890ff;
                    content: "";
                    animation: gmRadioEffect .36s ease-in-out;
                    animation-fill-mode: both;
                    visibility: hidden;
                }
                .gm-radio-inner {
                    border-color: #1890ff;
                    &:after {
                        transform: scale(.875);
                        opacity: 1;
                    }
                }
            }

            & + span {
                padding-left: 8px;
                padding-right: 8px;
                font-weight: 400;
            }
        }
    }

    .gm-checkbox-input:focus + .gm-checkbox-inner,
    .gm-checkbox-wrapper:hover .gm-checkbox-inner,
    .gm-checkbox:hover .gm-checkbox-inner {
        border-color: #1890ff;
    }

    .gm-radio-focused .gm-radio-inner,
    .gm-radio-wrapper:hover .gm-radio .gm-radio-inner,
    .gm-radio:hover .gm-radio-inner {
        border-color: #1890ff;
    }

    .gm-radio-wrapper:hover .gm-radio:after,
    .gm-radio:hover:after {
        visibility: visible;
    }
}

